<template>
  <div class="homepage2" id="chart4"></div>
</template>

<script>
import Highcharts from "highcharts";
export default {
  data() {
    return {};
  },
  methods: {
    getChart() {
      var chart = Highcharts.chart("chart4", {
        credits: {
          enabled: false, // 禁用版权信息
        },
        chart: {
          type: "areaspline",
        },
        title: {
          text: "本期金额 累计金额对比",
          style: {
            color: "",
            fontSize: "12px",
          },
        },
        legend: {
          layout: "vertical",
          align: "left",
          verticalAlign: "top",
          x: 150,
          y: 100,
          floating: true,
          borderWidth: 1,
          backgroundColor:
            (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
            "#FFFFFF",
        },
        xAxis: {
          categories: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          plotBands: [
            {
              // 标识出周末
              from: 4.5,
              to: 6.5,
              color: "rgba(68, 170, 213, .2)",
            },
          ],
        },
        yAxis: {
          title: {
            text: "",
          },
        },
        tooltip: {
          shared: true,
          valueSuffix: " 单位",
        },
        plotOptions: {
          areaspline: {
            fillOpacity: 0.5,
          },
        },
        series: [
          {
            name: "本期金额",
            data: [3, 4, 3, 5, 4, 10, 12],
          },
          {
            name: "累计金额",
            data: [1, 3, 4, 3, 3, 5, 4],
          },
        ],
      });
    },
  },
  mounted() {
    this.getChart();
  },
};
</script>

<style lang="scss" scoped>
.homepage2 {
  flex: 1;
  background-color: #fff;
}
</style>